<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 引入Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!--引入zyp的css-->
  <link rel="stylesheet" href="css/zyp.css">
  <link rel="stylesheet" href="plugins/elementUI/index.css">



</head>
<body class="hold-transition sidebar-mini" style="width: 100%;">
<!-- <div class="wrapper" id="erp"> -->
  <!-- 区域管理 -->
  <div id="erp"> 
        <!-- 导航栏 -->
        <div style="background-color: white; position: relative; top: 2px;">
            <ul class="nav nav-pills nav-stacked" >
                <li><a href="#">区域管理</a></li>
                <li><a href="#">物料分类</a></li>
                <li><a href="#">品类管理</a></li>
                <li><a href="#">产品线管理</a></li>
            </ul>
        </div>
               
        <div style="background-color: white; height: 650px; margin-top: 15px; margin-left: 15px; margin-right: 15px; border-radius: 5px;">
            <div style="margin-left: 15px; margin-right: 15px;">
                <!-- 按钮部分-->
                <button type="button" class="btn btn-primary" style="margin-top: 7px; margin-left: 5px;" onclick="document.getElementById('addrolediv').style.display='block';">新增品类</button> 
                <!--右上角三个小图标-->
                <div class="navbar-right" style="margin-right: 5px; margin-top: 15px;">
                	<button @click="delCategory()" type="button" class="btn btn-default btn-xs" style="border:none;">
                    	<img src="" class="glyphicon glyphicon-trash">
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="" class="glyphicon glyphicon-refresh">
                    &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="" class="glyphicon glyphicon-fullscreen">
                </div>
                
                <div class="navbar-form navbar-right">
                    <div class="form-group">
                        <input v-model="categoryKey" type="text" class="form-control" placeholder="请输入品类名称关键字...">
                    </div>
                    <button type="submit" class="btn btn-default" @click="searchCategory()">搜索</button>
                </div>
                <button class="button button4 navbar-right" @click="allButton()">全部</button>
                <button class="button button4 navbar-right" @click="enableButton()">启用</button>
                <button class="button button4 navbar-right" @click="disableButton()">禁用</button>
            </div>  
            <!-- 表格部分 -->
            <div style="margin-left: 15px; margin-right: 15px; margin-top: 15px; height: 510px; ">
                <table class="table table-hover">
                    <thead style="background-color: #fafafa;">
                        <tr>
                            <th>操作</th>
                            <th>品类名称</th>
                            <th>状态</th>
                            <th>排序</th>
                            <th>添加日期</th>
                            <th>描述</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(category,key) in categorys" @click="select(category.cgid)">
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <img class="glyphicon glyphicon-edit" src="">
                            </td>
                            <td>{{category.cgname}}</td>
                            <td @click="sw(key)">
                                <el-switch
                                :value="value[key]"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>    
                            </td> 
                            <td>{{key+1}}</td>
                            <td>{{category.cgtime}}</td>
                            <td>{{category.cgdescription}}</td>
                        </tr>                      
                    </tbody>
                 </table>
            </div>
            <!-- 分页 -->
            <div class="page" id="page_div">               
                <button @click="upPage()">上一页</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label id="currentPage">{{currentPage}}</label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button @click="downPage()">下一页</button>
            </div>
             <!--弹框——新增品类-->
            <div id="addrolediv">
                <div style="height: 40px;border-bottom:1px solid rgb(233, 233, 233);">
                  <div style="width: 50px;margin-left: 30px;margin-top: 20px;">
                    <p style="font-size: 15px;color: rgb(82, 82, 82);"><b>品类管理</b></p>
                  </div>
                  <div style="margin-left: 750px;margin-top: -40px;">
                    <button class="btn btn-default" onclick = "document.getElementById('addrolediv').style.display='none';" style="height: 30px;line-height: 10px;">x</button>
                  </div>
                </div>
                <div style="border-bottom:1px solid rgb(233, 233, 233);">
                  <div style="margin-top: 15px;margin-bottom: 20px;">
                    <span style="margin-left: 100px;">产品线名称：</span>
                    <input v-model="categoryCgname" type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
                  </div> 
                  <div style="margin-top: 10px;margin-bottom: 10px;">
                    <span style="margin-left: 100px;">状态：</span>
                    <span style="margin-right:70px">
                      <input v-model="categoryStatus" type="radio" name="status" value="1" style="margin-right:5px">
                      	启用
                    </span>
                    <span>
                      <input v-model="categoryStatus" type="radio" name="status" value="0" style="margin-right:5px">
                     	 禁用
                    </span>
                  </div>
                  <div style="margin-top: 15px;margin-bottom: 20px;">
                    <span style="margin-left: 100px;">描述：</span>
                    <input v-model="categoryCgdescription" type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
                  </div>
                </div>
                <div>
                  <div style="margin-left: 600px;margin-top:15px">
                    <button @click = "document.getElementById('addrolediv').style.display='none';submit()">确认</button>                                      
                  </div>
                </div>
              </div>
                
        </div>
  </div>
<!-- </div> -->



<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard3.js"></script>
<!-- 引入vue -->
<script src="plugins/vue-2.6.10/vue-2.6.10/vue-resource.min.js"></script>
<script src="plugins/vue-2.6.10/vue-2.6.10/vue.js"></script>
<script src="plugins/vue-2.6.10/vue-2.6.10/axios.min.js"></script>
<!--引入ElementUi-->
<script src="plugins/elementUI/index.js"></script>
<!-- zyp的script-->
<script>
    $(function(){
       var wer = new Vue({
            el:"#erp",
            data() {
                return {
                	 //switch开关
                    value: [],                  
                    categorys:[],
                    //弹框数据
                    categoryCgname:"",
                    categoryStatus:"",
                    categoryCgdescription:"",
                    //分页
                    currentPage:1,
                    totalPages:"",
                    type:2,
                    //搜索
                    categoryKey:"",
                    //获取要删除的id
                    categoryId:0, 
                }
            },
            mounted(){ 
                //展示品类信息
                axios.get('category/find?page=1')
                    .then(res =>{
                        console.info(res)
                       this.categorys = res.data.data; 
                       this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){
                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;   
                    })
            },
            methods: {
            	 submit:function(){
                     axios.get("category/add?cgname="+this.categoryCgname+"&&status="+this.categoryStatus+"&&cgdescription="+this.categoryCgdescription)
                             .then(res =>{
                                 console.info(res);                            
                             })
                 },
                 //下一页
                 downPage:function(){
                     if(this.currentPage==this.totalPages){
                         alert("已经是最后一页了~~")
                     }else{
                         this.currentPage++;
                     }
                     if(this.type==2){
                         axios.get("category/find?page="+this.currentPage)
                         .then(res =>{  
                             console.info(res);  
                             this.categorys = res.data.data
                             var val = new Array();
                             var data = res.data.data;
                             var flage;
                             for(var i=0;i<data.length;i++){
                                     var s = data[i].status;
                                     if (s==0) {
                                         flage = true;
                                     } else {
                                         flage = false;
                                     }
                                     val.push(flage);
                             }            
                             this.value=val;
                         })
                     }else if(this.type==1){ //1 红色状态
                         axios.get('category/findCategoryByStatus?status='+1+"&&page="+this.currentPage)
                         .then(res =>{  
                             console.info(res);  
                             this.categorys = res.data.data
                             var val = new Array();
                             var data = res.data.data;
                             var flage;
                             for(var i=0;i<data.length;i++){
                                     var s = data[i].status;
                                     if (s==0) {
                                         flage = true;
                                     } else {
                                         flage = false;
                                     }
                                     val.push(flage);
                             }            
                             this.value=val;
                         })
                     }else if(this.type==0){ //0 绿色状态
                         axios.get('category/findCategoryByStatus?status='+0+"&&page="+this.currentPage)
                         .then(res =>{  
                             console.info(res);  
                             this.categorys = res.data.data
                             var val = new Array();
                             var data = res.data.data;
                             var flage;
                             for(var i=0;i<data.length;i++){
                                     var s = data[i].status;
                                     if (s==0) {
                                         flage = true;
                                     } else {
                                         flage = false;
                                     }
                                     val.push(flage);
                             }            
                             this.value=val;
                         })
                     }else if(this.type==3){ //搜索
                         axios.get('category/search?cgname='+this.categoryKey+"&&page="+this.currentPage)
                         .then(res =>{  
                             console.info(res);  
                             this.categorys = res.data.data
                             var val = new Array();
                             var data = res.data.data;
                             var flage;
                             for(var i=0;i<data.length;i++){
                                     var s = data[i].status;
                                     if (s==0) {
                                         flage = true;
                                     } else {
                                         flage = false;
                                     }
                                     val.push(flage);
                             }            
                             this.value=val;
                         })
                     }
                     
                 },
                 //上一页
                 upPage:function(){
                     if(this.currentPage>1){
                         this.currentPage--;
                     }else{
                         alert("已经是第一页了~");
                     }
                     axios.get("category/find?page="+this.currentPage)
                         .then(res =>{
                         this.categorys = res.data.data
                         this.currentPage = res.data.currentPage;
                         var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){

                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);
                        }
                        
                        this.value=val;
                     })
                 },
                 //switch开关
                 sw:function(key){
                     //发请求修改数据库
                     var a = this.value;
                     console.info(key);
                     if(a[key]==true){
                         axios.get("category/updateSwitch?cgid="+this.categorys[key].cgid+"&&value="+1)// 0 true 开
                             .then(res =>{
                         })
                     }else{
                         axios.get("category/updateSwitch?cgid="+this.categorys[key].cgid+"&&value="+0)
                             .then(res =>{ 
                      })
                     }
                     //发请求渲染到页面
                     axios.get('category/find?page='+this.currentPage)
                     .then(res =>{
                         console.info(res)
                        this.categorys = res.data.data; 
                        var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){
                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);   
                        }                   
                        this.value=val;
                        console.info(this.value)            
                     })                               
                 },
                 //全部按钮
                 allButton:function(){
                     this.type=2;
                     axios.get('category/find?page='+this.currentPage)
                     .then(res =>{
                         this.categorys = res.data.data; 
                         this.totalPages = res.data.totalPages;
                        var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){

                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);
                        }          
                        this.value=val;
                     })
                 },
                 //启用按钮
                 enableButton:function(){
                     this.type=0;
                     axios.get('category/findCategoryByStatus?status='+0+"&&page="+this.currentPage)
                     .then(res =>{
                         this.categorys = res.data.data; 
                         this.totalPages = res.data.totalPages;
                        var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){

                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);
                        }          
                        this.value=val;
                     })
                 },
                 //禁用按钮
                 disableButton:function(){
                     this.type=1;
                     axios.get('category/findCategoryByStatus?status='+1+"&&page="+this.currentPage)
                     .then(res =>{
                         this.categorys = res.data.data; 
                         this.totalPages = res.data.totalPages;
                        var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){

                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);
                        }          
                        this.value=val;
                     })
                 },
                 //搜索
                 searchCategory:function(){
                     this.type=3;
                     axios.get('category/search?cgname='+this.categoryKey+"&&page="+this.currentPage)
                     .then(res =>{
                    	this.categorys = res.data.data;
                        this.totalPages = res.data.totalPages;
                        var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){

                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);
                        }          
                        this.value=val;
                     })
                 },
                 select:function(cgid){
                 	this.categoryId=cgid;
                 },
                 //删除功能
                 delCategory:function(){              	
                 	axios.get("category/delete?cgid="+this.categoryId+"&&page="+this.currentPage)
                 	.then(res =>{
                        this.categorys = res.data.data; 
                        this.totalPages = res.data.totalPages;
                        var val = new Array();
                        var data = res.data.data;
                        var flage;
                        for(var i=0;i<data.length;i++){
                             var s = data[i].status;
                             if (s==0) {
                                 flage = true;
                             } else {
                                 flage = false;
                             }
                             val.push(flage);
                        }          
                        this.value=val;
                     })
                 }
            }
        });
    })
   
</script>
</body>
</html>
